<template>
  <div class="org">
    <el-form ref="form" :model="form" label-width="80px" class="form" label-position="left">
      <div style="width: 600px;display: flex;">
        <el-form-item label="题库类型:">
          <el-select v-model="form.rule" style="width: 185px;" placeholder="网球规则" @change="ruleChange">
            <el-option :label="item.cate_name" :value="item.id" v-for="(item, index) in getLibTypeArr" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-input style="width: 300px;margin-left: 40px;" v-model="form.keyword" @keyup.enter.native.prevent="onSubmit"
          placeholder="请输知识点关键字搜索"></el-input>
      </div>
      <div class="search">
        <el-button type="primary" @click="addColumn">新增知识点</el-button>
      </div>
    </el-form>
    <div class="orgTable">
      <el-table :data="tableData" stripe style="width: 60%;">
        <el-table-column prop="cate_name" label="题库类型">
        </el-table-column>
        <el-table-column prop="p_cate_name" label="知识点名称">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operation" @click="check(scope.row)">查看</span>
            <span class="operation" @click="modify(scope.row)">修改</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-bottom: 40px; margin-right: 150px;"></el-pagination>
    <!-- 新增知识点 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" :modal="false">
      <el-form :model="dialogForm">
        <el-form-item label="题库类型:" label-width="90px">
          <el-select v-model="dialogForm.rule" style="width: 60%;" placeholder="网球规则" @change="ruleChange">
            <el-option v-if="index != 0" :label="item.cate_name" :value="item.id" v-for="(item, index) in getLibTypeArr"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="知识点名称:" label-width="90px">
          <el-input style="width: 60%;" v-model="dialogForm.name" autocomplete="off" size="medium"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="confirm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        getLibTypeArr: [],
        total: null,
        currentPage: '',
        dialogFormVisible: false,
        form: {
          keyword: '',
          rule: 0,
        },
        dialogForm: {
          rule: 1,
          name: ''
        },
        type: null,
        title: '',
        id: '',
      }
    },
    created() {
      this.getTopic()
      this.getLibType()
    },
    methods: {
      ChangePage(page) {
        this.currentPage = page;
        this.getTopic();
      },
      onSubmit() {
        this.getTopic()
      },
      getLibType() {
        this.$axios.post('/Qlib/getLibType', {}, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              data.unshift({
                "id": 0,
                "cate_name": "全部"
              })
              this.getLibTypeArr = data
            }
          })
          .catch(error => {});
      },
      getTopic() {
        this.$axios.post('/Qlib/knowledgeList', {
            keywords: this.form.keyword,
            cate_id: this.form.rule,
            limit: 10,
            page: this.currentPage
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              this.tableData = data.rows
              this.total = data.count
            } else {
              this.$message({
                type: 'info',
                message: msg
              })
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      addColumn() {
        this.type = 1
        this.title = '新增知识点'
        this.dialogFormVisible = true
        this.dialogForm.rule = ''
        this.dialogForm.name = ''
      },
      modify(row) {
        this.type = 2
        this.title = '修改知识点名称'
        this.dialogFormVisible = true;
        this.dialogForm.name = row.p_cate_name;
        this.dialogForm.rule = row.cate_id;
        this.id = row.id
      },
      confirm() {
        if (!(this.dialogForm.name.trim())) {
          this.$message({
            type: 'info',
            message: '请输入知识点名称'
          })
          return false
        }
        this.dialogFormVisible = false;
        this.$axios.post('Qlib/saveKnowledge', {
            id: this.id,
            pid: this.dialogForm.rule,
            cate_name: this.dialogForm.name
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            this.id = ''
            const {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              this.getTopic()
              this.$message({
                type: 'success',
                message: msg
              })
            } else {
              this.$message({
                type: 'info',
                message: msg
              })
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      check(item) {
        this.$router.push({
          path: '/index/questionMange/tennisRule',
          query: {
            id: item.id,
            name: item.p_cate_name
          }
        })
      },
      ruleChange(val) {
        this.rule = val
        this.getTopic()
      },
    }
  }
</script>
<style lang="less" scoped>
  .org {
    margin-top: 36px;

    .form {
      width: 70%;
      display: flex;
      justify-content: space-between;
      margin-left: 50px;
      margin-bottom: 35px;

      .keyword {
        width: 410px;
      }

      .state {
        width: 200px;
      }

      .search {
        width: 123px;
        text-align: right;
      }
    }

    .line {
      width: 80%;
      /*height: 0.5px;*/
      border-top: 1px #dcdfe6 dotted
    }

    .orgTable {
      margin-top: 34px;
      margin-left: 40px;
    }
  }

  .ogg {
    color: #FF9800;
  }

  .green {
    color: #259B24;
  }

  .red {
    color: red;
  }

  .operation {
    color: #409EFF;
    cursor: pointer;
  }
</style>
